(function() {
    const str = [
        "零", "一", "二", "三", "四", "五", "六", "七", "八", "九",
        "十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
        "二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九",
        "三十", "三十一", "三十二", "三十三", "三十四", "三十五", "三十六", "三十七", "三十八", "三十九",
        "四十", "四十一", "四十二", "四十三", "四十四", "四十五", "四十六", "四十七", "四十八", "四十九",
        "五十", "五十一", "五十二", "五十三", "五十四", "五十五", "五十六", "五十七", "五十八", "五十九",
    ];
    let hourIndex, minuteIndex, Data;

    function apendEl(elName, elClassName, elNumber, edg, timeUnit) {
        let frg = document.createDocumentFragment()
        for (let index = 0; index < elNumber; index++) {
            let el = document.createElement(elName);
            el.style.transformOrigin = "left";
            el.style.transform = `rotate(${index * edg}deg)`
            el.innerHTML = `<span class="childs-text">${index<10?'零'+ str[index]:str[index]}${timeUnit}</span>`;
            el.className = elClassName;
            frg.appendChild(el);
        };
        return frg;
    };

    function getClokeDate() {
        let date = new Date();
        let dateNumber = {
            year: date.getFullYear(),
            month: date.getMonth() + 1,
            day: date.getDate(),
            hour: date.getHours(),
            minute: date.getMinutes(),
            second: date.getSeconds(),
            week: date.getDay()
        };
        return dateNumber;
    };

    function setEleStyle(eles, elClassName, elIndex) {
        elIndex === 0 ?
            eles[eles.length - 1].classList.remove(elClassName) :
            eles[elIndex - 1].classList.remove(elClassName);
        eles[elIndex].classList.add(elClassName);
        if (eles.length == 24) {
            eles[elIndex].parentElement.style.transform = `rotate(-${elIndex * 15}deg)`;
        } else {
            eles[elIndex].parentElement.style.transform = `rotate(-${elIndex * 6}deg)`;
        }
    }
    window.onload = () => {
        let elYear = document.getElementById('years'),
            elMinutes = document.getElementById('minutes'),
            elHours = document.getElementById('hours'),
            elSecends = document.getElementById('secends');
        Data = getClokeDate();
        elHours.appendChild(apendEl('div', 'hour-childs', 24, 15, '时'));
        elMinutes.appendChild(apendEl('div', 'minute-childs', 60, 6, '分'));
        elSecends.appendChild(apendEl('div', 'secend-childs', 60, 6, '秒'));
        console.log('code run dev');
        elYear.innerHTML = `
                            <div>
                                <h2>${Data.year}年${Data.month}月${Data.day}日</h2>
                                <p>星期${str[Data.week]}</p>
                            </div>
                            `;
        let
            elSecnedChilds = elSecends.getElementsByClassName('secend-childs'),
            elHourChilds = elHours.getElementsByClassName('hour-childs'),
            elMinuteChilds = elMinutes.getElementsByClassName('minute-childs');

        hourIndex = Data.hour
        minuteIndex = Data.minute;
        setEleStyle(elSecnedChilds, 'secend-childs-active', Data.second);
        setEleStyle(elHourChilds, 'hour-childs-active', Data.hour);
        setEleStyle(elMinuteChilds, 'minute-childs-active', Data.minute);
        setInterval(() => {
            Data = getClokeDate();
            setEleStyle(elSecnedChilds, 'secend-childs-active', Data.second);
            if (Data.hour === hourIndex) {
                return
            } else {
                setEleStyle(elHourChilds, 'hour-childs-active', Data.hour);
            }
            if (Data.minute === minuteIndex) {
                return
            } else {
                setEleStyle(elMinuteChilds, 'minute-childs-active', Data.minute);
            }
        }, 1000);
    };
})();